<template>
    <el-container class="main">
        <Aside />
        <el-main>
            <el-row :gutter="10">
                <el-col
                    :xs="24"
                    :sm="12"
                    :lg="6"
                    v-for="item in this.$store.state.mainData"
                    :key="item.index"
                >
                    <a :href="item.link" target="blank">
                        <el-card
                            class="box-card main-card"
                            style="margin: 10px 0"
                            shadow="hover"
                        >
                            <div class="main-card-content">
                                <img :src="item.img" />
                                <div class="main-card-content-info">
                                    <h3>{{ item.title }}</h3>
                                    <p>{{ item.desc }}</p>
                                </div>
                            </div>
                        </el-card>
                    </a>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>

<script>
import Aside from '@/components/Aside.vue'
export default {
    components: {
        Aside,
    },
}
</script>

<style lang="scss">
.main-card {
    margin: 10px 0;
    cursor: pointer;
    .main-card-content {
        display: flex;
        align-items: center;
        img {
            width: 30px;
            height: 30px;
            margin-right: 10px;
        }
        .main-card-content-info {
            width: 90%;
            h3 {
                font-size: 14px;
            }
            p {
                font-size: 12px;
                color: #888ea2;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                width: 100%;
                line-height: 1.8;
            }
        }
        span {
            margin-left: 10px;
            text-decoration: none;
            &:nth-of-type(1) {
                font-size: 18px;
                font-weight: 700;
                color: #ffa502;
                white-space: nowrap;
            }
            &:nth-of-type(2) {
                font-size: 14px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}
</style>
